import React, {useState, useEffect, FC} from 'react';
import {Link, useNavigate} from "react-router-dom";
import "./Err.scss";
import PopUpBox from "../../components/PopUpBox";
import MyTable from "../../components/MyTable";


const Err503: FC = ({}) => {
    // let [time, setTime] = useState<number>(5);
    // const navigate = useNavigate()
    //
    // useEffect(() => {
    //     let timer = setInterval(() => {
    //         if (time <= 0) {
    //             // 清除定时器
    //             clearInterval(timer)
    //             // 跳转到首页
    //             navigate('/')
    //         }
    //         setTime(time--);
    //     }, 1000)
    //     // 当组件销毁时，清除定时器
    //     return () => {
    //         clearInterval(timer)
    //     }
    // }, []);

    // 表头
    let title = [
        {
            title: '用户名',
            dataIndex: 'name',
            type: "input",
            required: true, // 是否必填
        },
        {
            title: '年龄',
            dataIndex: 'age',
            type: "input",
            required: true, // 是否必填
            regular: /^[0-9]+$/, // 正则验证
        },
        {
            title: '角色',
            dataIndex: 'role',
            type: "select",
            required: true, // 是否必填
            options: [
                {
                    label: "管理员",
                    value: "admin"
                },
                {
                    label: "普通用户",
                    value: "user"
                }
            ],
            onChange: (value: any, form: any) => {
                console.log(value, form);
            }
        },
    ]
    // 表格操作
    let operate = {
        change: (data: any) => {

        },
        delete: (data: any) => {
        },
    }

    // 表体内容
    const dataSource = [
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            role: 'admin',
        },
        {
            key: '2',
            name: '胡彦祖',
            age: 42,
            role: 'user',
        },
    ];

    return (
        // <div className="err">
        //     <img src={require("../../assets/503.png")} alt=""/>
        //     <h1>服务出错了</h1>
        //     <p className="caption-text">您访问的页面服务正在维护！<br/>将在{time}秒后返回主页</p>
        //     <Link to={'/'} replace>返回主页</Link>
        // </div>
        <MyTable title={title} operate={operate} dataSource={dataSource} handleOk={() => {
            console.log("点击了确定");
        }}/>
    );
}

export default Err503;